<!-- Prome Visual Novel Extension Settings -->
<!-- This is the settings for the Prome Visual Novel Extension. -->
<!-- Brought to you by Bronya Rand herself. Bronya: :BronyaUhhhhh: -->

<div class="prome-vn-settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b data-i18n="Prome (Visual Novel Extension)">Prome (Visual Novel Extension)</b>
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>

        <div class="inline-drawer-content">
            <div class="prome-drawer-content">
                <small class="flex-container justifyCenter">
                    <span data-i18n="Brought to you by">Brought to you by </span>
                    <a href="https://github.com/Bronya-Rand" data-i18n="Bronya Rand">Bronya Rand</a>
                    <span data-i18n="and Prometheus."> and Prometheus.</span>
                </small>

                <div class="prome_vn_block flex-container flexFlowColumn">
                    <label class="checkbox_label" for="prome-enable-vn"
                        title="Toggles Prome, VN Mode and other Prome features."
                        data-i18n="[title]Toggles Prome, VN Mode and other Prome features.">
                        <input id="prome-enable-vn" type="checkbox" />
                        <span data-i18n="Enable Prome">Enable Prome</span>
                    </label>
                </div>

                <!-- Sheld Configuration -->
                <details>
                    <summary data-i18n="Sheld Configuration">
                        Sheld Configuration
                    </summary>

                    <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                        <label class="checkbox_label" for="prome-hide-sheld"
                            title="Hide the message box (sheld) in the ST UI."
                            data-i18n="[title]Hide the message box (sheld) in the ST UI.">
                            <input id="prome-hide-sheld" type="checkbox" />
                            <div class="flex-container flexFlowRow alignitemscenter">
                                <span data-i18n="Hide Sheld">Hide Sheld</span>
                                <small data-i18n="(Message Box)">(Message Box)</small>
                            </div>
                        </label>
                        <label class="checkbox_label" for="prome-sheld-last_mes"
                            title="Only Show Last Message in Chat (Requires Prome to be enabled)."
                            data-i18n="[title]Only Show Last Message in Chat (Requires Prome to be enabled).">
                            <input id="prome-sheld-last_mes" type="checkbox" />
                            <div class="flex-container flexFlowRow alignitemscenter">
                                <span data-i18n="Enable Traditional VN Mode">Enable Traditional VN Mode</span>
                                <small data-i18n="(Requires Prome to be enabled)">(Requires Prome to be enabled)</small>
                            </div>
                        </label>
                    </div>
                </details>

                <!-- Letterbox Configuration -->
                <details>
                    <summary data-i18n="Letterbox Configuration">
                        Letterbox Configuration
                        <small data-i18n="(Requires Prome to be enabled)">(Requires Prome to be enabled)</small>
                    </summary>

                    <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                        <div class="prome_vn_block flex-container flexFlowColumn">
                            <label for="prome-letterbox-mode" data-i18n="Letterbox Mode">Letterbox Mode</label>
                            <small data-i18n="Select the letterbox mode for the Prome VN UI.">Select the letterbox mode
                                for the Prome
                                VN UI.</small>
                            <select id="prome-letterbox-mode">
                                <option value="0" data-i18n="None">None</option>
                                <option value="1" data-i18n="Horizontal Letterbox">
                                    Horizontal Letterbox
                                </option>
                                <option value="2" data-i18n="Vertical Letterbox">
                                    Vertical Letterbox
                                </option>
                            </select>
                        </div>

                        <div class="prome_vn_block flex-container flexFlowRow">
                            <div class="prome_vn_block flex-container flexFlowColumn">
                                <label for="prome-letterbox-color" class="title_restorable">
                                    <span data-i18n="Letterbox Color">Letterbox Color</span>
                                    <div id="prome-letterbox-color-restore" title="Restore default value"
                                        class="right_menu_button">
                                        <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                    </div>
                                </label>
                                <small data-i18n="Select the color of the letterbox.">Select the color of the
                                    letterbox.</small>
                                <div class="flex-container flexFlowRow">
                                    <toolcool-color-picker id="prome-letterbox-color-picker"></toolcool-color-picker>
                                </div>
                            </div>

                            <div class="prome_vn_block flex-container flexFlowColumn">
                                <label for="prome-letterbox-size" class="title_restorable">
                                    <span data-i18n="Letterbox Size">Letterbox Size</span>
                                    <div id="prome-letterbox-size-restore" title="Restore default value"
                                        class="right_menu_button">
                                        <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                    </div>
                                </label>
                                <small data-i18n="Set the size of the letterbox.">Set the size of the letterbox.</small>
                                <input class="neo-range-slider" id="prome-letterbox-size" type="range" min="1" max="50"
                                    step="1" />
                                <input class="neo-range-input" id="prome-letterbox-size-counter" type="number" min="1"
                                    max="50" step="1" data-for="prome-letterbox-size" />
                            </div>
                        </div>
                    </div>
                </details>

                <!-- Sprite Configuration -->
                <details>
                    <summary data-i18n="Sprite Configuration">
                        Sprite Configuration
                        <small data-i18n="(Requires Prome to be enabled)">(Requires Prome to be enabled)</small>
                    </summary>

                    <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                        <h4 data-i18n="General Sprite Settings">General Sprite Settings</h4>
                        <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                            <label class="checkbox_label" for="prome-emulate-sprites"
                                title="Emulates the character card of a character to be a sprite. (Requires Prome to be enabled)."
                                data-i18n="[title]Emulates the character card of a character to be a sprite. (Requires Prome to be enabled).">
                                <input id="prome-emulate-sprites" type="checkbox" />
                                <span data-i18n="Emulate Character Card as Sprite">Emulate Character Card as
                                    Sprite</span>
                            </label>
                            <label class="checkbox_label" for="prome-sprite-shake"
                                title="Shakes the character sprite when the character is speaking (Only works if Streaming is enabled in Preset Settings)."
                                data-i18n="[title]Shakes the character sprite when the character is speaking (Only works if Streaming is enabled in Preset Settings).">
                                <input id="prome-sprite-shake" type="checkbox" />
                                <span data-i18n="Enable Sprite Shake">[BETA] Enable Sprite Shake</span>
                            </label>
                            <label class="checkbox_label" for="prome-sprite-sprite-scale"
                                title="Toggles sprite scaling for character sprites."
                                data-i18n="[title]Toggles sprite scaling for character sprites.">
                                <input id="prome-sprite-scale" type="checkbox" />
                                <span data-i18n="Enable Sprite Scale">Enable Sprite Scale</span>
                            </label>

                            <div class="prome_vn_block flex-container flexFlowRow">
                                <div class="prome_vn_block flex-container flexFlowColumn">
                                    <label for="prome-sprite-scale-size" class="title_restorable">
                                        <span data-i18n="Sprite Scale">Sprite Scale</span>
                                        <div id="prome-sprite-scale-size-restore" title="Restore default value"
                                            class="right_menu_button">
                                            <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                        </div>
                                    </label>
                                    <small data-i18n="Set the size scale of the character sprites.">Set the size
                                        scale of the character
                                        sprite.</small>
                                    <input class="neo-range-slider" id="prome-sprite-scale-size" type="range" min=".1"
                                        max="2.0" step=".01" />
                                    <input class="neo-range-input" id="prome-sprite-scale-size-counter" type="number"
                                        min=".1" max="2.0" step=".01" data-for="prome-sprite-scale-size" />
                                </div>
                            </div>
                        </div>

                        <hr />

                        <!-- Focus/Defocus Mode -->
                        <h4 data-i18n="Focus Settings">Focus Settings</h4>
                        <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                            <div class="flex-container flexFlowRow">
                                <label class="checkbox_label" for="prome-sprite-zoom"
                                    title="Focuses the current speaking character in chat. (Requires Prome to be enabled)."
                                    data-i18n="[title]Focuses the current speaking character in chat. (Requires Prome to be enabled).">
                                    <input id="prome-sprite-zoom" type="checkbox" />
                                    <span data-i18n="Enable Focus Mode">Enable Focus Mode</span>
                                </label>
                                <label class="checkbox_label" for="prome-sprite-defocus-tint"
                                    title="Darkens non-speaking (unfocused) characters. (Requires Prome to be enabled)."
                                    data-i18n="[title]Darkens non-speaking (unfocused) characters. (Requires Prome to be enabled).">
                                    <input id="prome-sprite-defocus-tint" type="checkbox" />
                                    <span data-i18n="Darken Unfocused Character Sprites">Darken Character Sprites</span>
                                </label>
                            </div>

                            <div class="prome_vn_block flex-container flexFlowColumn">
                                <div class="prome_vn_block flex-container flexFlowColumn">
                                    <label for="prome-sprite-zoom-animation" data-i18n="Focus Mode Animation">Focus Mode
                                        Animation</label>
                                    <small data-i18n="Select the animation for focus mode.">Select the animation for
                                        focus mode.</small>
                                    <select id="prome-sprite-zoom-animation">
                                        <option value="ease" data-i18n="Ease">Ease</option>
                                        <option value="ease-in" data-i18n="Ease-In">Ease-In</option>
                                        <option value="ease-out" data-i18n="Ease-Out">
                                            Ease-Out
                                        </option>
                                        <option value="ease-in-out" data-i18n="Ease-In-Out">
                                            Ease-In-Out
                                        </option>
                                        <option value="linear" data-i18n="Linear">Linear</option>
                                    </select>
                                </div>

                                <div class="prome_vn_block flex-container flexFlowColumn">
                                    <label for="prome-sprite-zoom-speed" class="title_restorable">
                                        <span data-i18n="Focus Mode Animation Speed">Focus Mode Animation Speed</span>
                                        <div id="prome-sprite-zoom-speed-restore" title="Restore default value"
                                            class="right_menu_button">
                                            <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                        </div>
                                    </label>
                                    <small data-i18n="Set the speed of the focus animation.">Set the speed of the focus
                                        animation.</small>
                                    <input class="neo-range-slider" id="prome-sprite-zoom-speed" type="range" min=".1"
                                        max="1.0" step=".01" />
                                    <input class="neo-range-input" id="prome-sprite-zoom-speed-counter" type="number"
                                        min=".01" max="1.0" step=".01" data-for="prome-sprite-zoom-speed" />
                                </div>
                            </div>
                        </div>

                        <hr />

                        <!-- Sprite Shadows -->
                        <h4 data-i18n="Sprite Shadow Settings">Sprite Shadow Settings</h4>
                        <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                            <label class="checkbox_label" for="prome-sprite-shadow"
                                title="Adds a shadow to the character sprite."
                                data-i18n="[title]Adds a shadow to the character sprite.">
                                <input id="prome-sprite-shadow" type="checkbox" />
                                <span data-i18n="Enable Sprite Shadow">Enable Sprite Shadow</span>
                            </label>

                            <div class="flex-container flexFlowRow">
                                <div class="prome_vn_block flex-container flexFlowColumn">
                                    <label for="prome-sprite-shadow-offsetx" class="title_restorable">
                                        <span data-i18n="Shadow X Offset">Shadow X Offset</span>
                                        <div id="prome-sprite-shadow-offsetx-restore" title="Restore default value"
                                            class="right_menu_button">
                                            <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                        </div>
                                    </label>
                                    <small data-i18n="Set the X offset of the character shadow.">Set the X offset of
                                        the character
                                        shadow.</small>
                                    <input class="neo-range-slider" id="prome-sprite-shadow-offsetx" type="range"
                                        min="1" max="20" step="1" />
                                    <input class="neo-range-input" id="prome-sprite-shadow-offsetx-counter"
                                        type="number" min="1" max="20" step="1"
                                        data-for="prome-sprite-shadow-offsetx" />
                                </div>

                                <div class="prome_vn_block flex-container flexFlowColumn">
                                    <label for="prome-sprite-shadow-offsety" class="title_restorable">
                                        <span data-i18n="Shadow Y Offset">Shadow Y Offset</span>
                                        <div id="prome-sprite-shadow-offsety-restore" title="Restore default value"
                                            class="right_menu_button">
                                            <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                        </div>
                                    </label>
                                    <small data-i18n="Set the Y offset of the character shadow.">Set the Y offset of
                                        the character
                                        shadow.</small>
                                    <input class="neo-range-slider" id="prome-sprite-shadow-offsety" type="range"
                                        min="1" max="20" step="1" />
                                    <input class="neo-range-input" id="prome-sprite-shadow-offsety-counter"
                                        type="number" min="1" max="20" step="1"
                                        data-for="prome-sprite-shadow-offsety" />
                                </div>

                                <div class="prome_vn_block flex-container flexFlowColumn">
                                    <label for="prome-sprite-shadow-blur" class="title_restorable">
                                        <span data-i18n="Shadow Blur">Shadow Blur</span>
                                        <div id="prome-sprite-shadow-blur-restore" title="Restore default value"
                                            class="right_menu_button">
                                            <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                        </div>
                                    </label>
                                    <small data-i18n="Set the blur of the character shadow.">Set the blur of the
                                        character
                                        shadow.</small>
                                    <input class="neo-range-slider" id="prome-sprite-shadow-blur" type="range" min="1"
                                        max="20" step="1" />
                                    <input class="neo-range-input" id="prome-sprite-shadow-blur-counter" type="number"
                                        min="1" max="20" step="1" data-for="prome-sprite-shadow-blur" />
                                </div>
                            </div>
                        </div>

                        <hr />

                        <!-- Auto-Hide Sprites -->
                        <h4 data-i18n="Auto-Hide Sprite Settings">Auto-Hide Sprite Settings</h4>
                        <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                            <label class="checkbox_label" for="prome-auto-hide-sprites"
                                title="Auto-hides characters from the screen that haven't been in the conversation for a while up to X characters. (Requires Prome to be enabled)."
                                data-i18n="[title]Auto-hides characters from the screen that haven't been in the conversation for a while up to X characters. (Requires Prome to be enabled).">
                                <input id="prome-auto-hide-sprites" type="checkbox" />
                                <span data-i18n="Auto-Hide Sprites">Auto-Hide Sprites</span>
                            </label>

                            <div class="flex-container flexFlowColumn">
                                <label for="prome-sprite-max-visible" class="title_restorable">
                                    <span data-i18n="Max Visible Sprites">Max Visible Sprites</span>
                                    <div id="prome-sprite-max-visible-restore" title="Restore default value"
                                        class="right_menu_button">
                                        <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
                                    </div>
                                </label>
                                <small
                                    data-i18n="Set the maximum number of visible sprites that appears in the VN screen.">Set
                                    the maximum number of visible sprites that appears in the VN screen.</small>
                                <input class="neo-range-input" id="prome-sprite-max-visible" type="number" min="1"
                                    max="8" step="1" data-for="prome-sprite-max-visible" />
                            </div>
                        </div>

                        <hr />

                        <h4 data-i18n="User Sprite Settings">[BETA] User Sprite Settings</h4>
                        <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                            <label class="checkbox_label" for="prome-user-sprite"
                                title="Enables the ability to use a user sprite for your persona."
                                data-i18n="[title]Enables the ability to use a user sprite for your persona.">
                                <input id="prome-user-sprite" type="checkbox" />
                                <span data-i18n="Enable User Sprite">Enable User Sprite</span>
                            </label>

                            <label for="prome-user-sprites" data-i18n="Sprite List">Sprite Set</label>
                            <small
                                data-i18n="Type the name of the sprite set to use for your persona. (Place your sprites in the 'characters' folder in SillyTavern).">Type
                                the name of the sprite set to use for your persona.
                                (Place your sprites in the 'characters' folder in
                                SillyTavern).</small>

                            <textarea id="prome-user-sprite-input" type="text" class="text_pole textarea_compact"
                                placeholder="Enter the name of your sprite"
                                data-i18n="[placeholder]Enter the name of your sprite"></textarea>

                            <p>
                                <small data-i18n="Note: Create a sprite folder in the ">Note: Create a sprite
                                    folder in the
                                </small>
                                <b>characters</b>
                                <small
                                    data-i18n=" folder of your user directory (typically 'data/default-user'). Place your expressions there.">
                                    folder of your user directory (typically
                                    'data/default-user'). Place your expressions there.</small>
                            </p>
                        </div>
                    </div>
                </details>

                <!-- Tint Configuration -->
                <details>
                    <summary data-i18n="Tint Configuration">Tint Configuration</summary>

                    <div class="prome_vn_block flex-container flexFlowColumn prome_details_padding">
                        <small
                            data-i18n="Character Tint/Share World Tint With Characters requires Prome to be enabled.">Character
                            Tint/Share World Tint With Characters requires Prome to be enabled.</small>

                        <div class="prome_vn_block flex-container flexFlowRow">
                            <label class="checkbox_label" for="prome-tint-chat"
                                title="Tints the chat background and/or character sprites."
                                data-i18n="[title]Tints the chat background and/or character sprites.">
                                <input id="prome-tint-enable" type="checkbox" />
                                <span data-i18n="Enable Chat Tint">Enable Chat Tint</span>
                            </label>

                            <label for="prome-world-tint-share" class="checkbox_label"
                                title="Applies the world tint to character sprites (Requires Prome to be enabled. This will override your character tint settings)."
                                data-i18n="[title]Applies the world tint to character sprites (Requires Prome to be enabled. This will override your character tint settings).">
                                <input id="prome-tint-share" type="checkbox" />
                                <span data-i18n="Share World Tint With Characters">Share World Tint With
                                    Characters</span>
                            </label>
                        </div>

                        <div class="prome_vn_block flex-container flexFlowColumn">
                            <label for="prome-tint-preset" data-i18n="Tint Presets">Tint Presets</label>
                            <small data-i18n="Select the tint preset to use for the Prome VN UI.">Select the tint preset
                                to use for
                                the Prome VN UI.</small>
                            <div class="flex-container flexFlowRow">
                                <select id="prome-tint-preset"></select>
                                <div id="prome-tint-save" data-i18n="[title]Save tint" title="Save tint"
                                    class="menu_button">
                                    <i class="fa-solid fa-save"></i>
                                </div>
                                <div id="prome-tint-delete" data-i18n="[title]Delete tint" title="Delete tint"
                                    class="menu_button">
                                    <i class="fa-solid fa-trash-can"></i>
                                </div>
                            </div>
                        </div>

                        <div class="prome_vn_block flex-container flexFlowRow">
                            <!-- World Tint Settings -->
                            <div class="prome_vn_block flex-container flexFlowColumn">
                                <span data-i18n="World Tint Settings">World Tint Settings</span>
                                <label class="checkbox_label" for="prome-world-tint" title="Tints the world background."
                                    data-i18n="[title]Tints the world background.">
                                    <input id="prome-world-tint" type="checkbox" />
                                    <span data-i18n="Enable World Tint">Enable World Tint</span>
                                </label>

                                <label for="prome-world-blur" class="title_restorable">
                                    <span data-i18n="Blur Strength">Blur Strength</span>
                                </label>
                                <small data-i18n="Set the strength of the world blur.">Set the strength of the world
                                    blur.</small>
                                <input class="neo-range-input" id="prome-world-blur" type="number" min="0" max="999"
                                    step="1" data-for="prome-world-blur" />

                                <label for="prome-world-brightness" class="title_restorable">
                                    <span data-i18n="Brightness">Brightness</span>
                                </label>
                                <small data-i18n="Set the brightness of the world.">Set the brightness of the
                                    world.</small>
                                <input class="neo-range-input" id="prome-world-brightness" type="number" min="0"
                                    max="999" step="1" data-for="prome-world-brightness" />

                                <label for="prome-world-contrast" class="title_restorable">
                                    <span data-i18n="Contrast">Contrast</span>
                                </label>
                                <small data-i18n="Set the contrast of the world.">Set the contrast of the world.</small>
                                <input class="neo-range-input" id="prome-world-contrast" type="number" min="0" max="999"
                                    step="1" data-for="prome-world-contrast" />

                                <label for="prome-world-grayscale" class="title_restorable">
                                    <span data-i18n="Grayscale">Grayscale</span>
                                </label>
                                <small data-i18n="Makes the world black and white.">Makes the world black and
                                    white.</small>
                                <input class="neo-range-input" id="prome-world-grayscale" type="number" min="0"
                                    max="999" step="1" data-for="prome-world-grayscale" />

                                <label for="prome-world-hue" class="title_restorable">
                                    <span data-i18n="Hue">Hue</span>
                                </label>
                                <small data-i18n="Set the hue of the world.">Set the hue of the world.</small>
                                <input class="neo-range-input" id="prome-world-hue" type="number" min="0" max="999"
                                    step="1" data-for="prome-world-hue" />

                                <label for="prome-world-invert" class="title_restorable">
                                    <span data-i18n="Invert">Invert</span>
                                </label>
                                <small data-i18n="Inverts the world colors.">Inverts the world colors.</small>
                                <input class="neo-range-input" id="prome-world-invert" type="number" min="0" max="999"
                                    step="1" data-for="prome-world-invert" />

                                <label for="prome-world-saturate" class="title_restorable">
                                    <span data-i18n="Saturate">Saturate</span>
                                </label>
                                <small data-i18n="Saturates the world colors.">Saturates the world colors.</small>
                                <input class="neo-range-input" id="prome-world-saturate" type="number" min="0" max="999"
                                    step="1" data-for="prome-world-saturate" />

                                <label for="sepia" class="title_restorable">
                                    <span data-i18n="Sepia">Sepia</span>
                                </label>
                                <small data-i18n="Makes the world warmer in color.">Makes the world warmer in
                                    color.</small>
                                <input class="neo-range-input" id="prome-world-sepia" type="number" min="0" max="999"
                                    step="1" data-for="prome-world-sepia" />
                            </div>

                            <!-- Character Tint Settings -->
                            <div class="prome_vn_block flex-container flexFlowColumn">
                                <span data-i18n="Character Tint Settings">Character Tint Settings</span>
                                <label class="checkbox_label" for="prome-character-tint"
                                    title="Tints the character sprites."
                                    data-i18n="[title]Tints the character sprites.">
                                    <input id="prome-character-tint" type="checkbox" />
                                    <span data-i18n="Enable Character Tint (Requires Prome to be enabled)">Enable
                                        Character Tint</span>
                                </label>

                                <label for="prome-character-blur" class="title_restorable">
                                    <span data-i18n="Blur Strength">Blur Strength</span>
                                </label>
                                <small data-i18n="Set the strength of the character blur.">Set the strength of the
                                    character
                                    blur.</small>
                                <input class="neo-range-input" id="prome-character-blur" type="number" min="0" max="999"
                                    step="1" data-for="prome-character-blur" />

                                <label for="prome-character-brightness" class="title_restorable">
                                    <span data-i18n="Brightness">Brightness</span>
                                </label>
                                <small data-i18n="Set the brightness of the character.">Set the brightness of the
                                    character.</small>
                                <input class="neo-range-input" id="prome-character-brightness" type="number" min="0"
                                    max="999" step="1" data-for="prome-character-brightness" />

                                <label for="prome-character-contrast" class="title_restorable">
                                    <span data-i18n="Contrast">Contrast</span>
                                </label>
                                <small data-i18n="Set the contrast of the character.">Set the contrast of the
                                    character.</small>
                                <input class="neo-range-input" id="prome-character-contrast" type="number" min="0"
                                    max="999" step="1" data-for="prome-character-contrast" />

                                <label for="prome-character-grayscale" class="title_restorable">
                                    <span data-i18n="Grayscale">Grayscale</span>
                                </label>
                                <small data-i18n="Makes the character black and white.">Makes the character black and
                                    white.</small>
                                <input class="neo-range-input" id="prome-character-grayscale" type="number" min="0"
                                    max="999" step="1" data-for="prome-character-grayscale" />

                                <label for="prome-character-hue" class="title_restorable">
                                    <span data-i18n="Hue">Hue</span>
                                </label>
                                <small data-i18n="Set the hue of the character.">Set the hue of the character.</small>
                                <input class="neo-range-input" id="prome-character-hue" type="number" min="0" max="999"
                                    step="1" data-for="prome-character-hue" />

                                <label for="prome-character-invert" class="title_restorable">
                                    <span data-i18n="Invert">Invert</span>
                                </label>
                                <small data-i18n="Inverts the character colors.">Inverts the character colors.</small>
                                <input class="neo-range-input" id="prome-character-invert" type="number" min="0"
                                    max="999" step="1" data-for="prome-character-invert" />

                                <label for="prome-character-saturate" class="title_restorable">
                                    <span data-i18n="Saturate">Saturate</span>
                                </label>
                                <small data-i18n="Saturates the character colors.">Saturates the character
                                    colors.</small>
                                <input class="neo-range-input" id="prome-character-saturate" type="number" min="0"
                                    max="999" step="1" data-for="prome-character-saturate" />

                                <label for="sepia" class="title_restorable">
                                    <span data-i18n="Sepia">Sepia</span>
                                </label>
                                <small data-i18n="Makes the character warmer in color.">Makes the character warmer in
                                    color.</small>
                                <input class="neo-range-input" id="prome-character-sepia" type="number" min="0"
                                    max="999" step="1" data-for="prome-character-sepia" />
                            </div>
                        </div>
                    </div>
                </details>

                <div class="prome_vn_block flex-container flexFlowColumn">
                    <small class="flex-container justifyCenter alignitemscenter">
                        <span>Prome Visual Novel Extension Version
                            <a id="prome-version-number"
                                href="https://github.com/Bronya-Rand/Prome-VN-Extension">1.2.2</a></span>
                    </small>
                    <small class="flex-container justifyCenter alignitemscenter flexFlowRow">
                        <small id="prome-keybinds" class="menu_button menu_button_icon">
                            <i class="fa-solid fa-keyboard"></i>
                            <span data-i18n="Keybinds">Keybinds</span>
                        </small>
                        <span> | </span>
                        <small id="prome-commands" class="menu_button menu_button_icon">
                            <i class="fa-solid fa-terminal"></i>
                            <span data-i18n="Commands">Commands</span>
                        </small>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>